<template>
  <div >
    <!------------------------面包屑--------------------------->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 4px">
      <el-breadcrumb-item :to="{path:'/student'}"><i class="el-icon-help"></i>在线考试</el-breadcrumb-item>
      <el-breadcrumb-item>我的成绩</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--考试搜索栏-->
    <el-input
        class="find-input"
        placeholder="输入考试名称"
        v-model="examName"
        clearable>
    </el-input>
    <!--  搜索按钮  -->
    <el-button type="primary" icon="el-icon-search"
               style="float: left;margin-left: 10px"
               @click="find()">
      搜索</el-button>
    <!--考试列表-->
    <el-table
        :data="TableData"
        stripe
        border
        style="width: 100%;margin-top: 100px">
      <el-table-column  align="center" prop="id" label="试卷id" width="100">
      </el-table-column>
      <el-table-column  align="center"  prop="examName" label="考试名称" width="180">
      </el-table-column>
      <el-table-column align="center"  prop="examTime" label="考试时间">
      </el-table-column>
      <el-table-column align="center" prop="majorName" label="专业" width="180">
      </el-table-column>
      <el-table-column align="center" prop="totalScore" label="你的总分" width="100">
        <template slot-scope="scope">
        <div v-show="scope.row.totalScore!=null">
          {{scope.row.totalScore}}
        </div>
        <div v-show="scope.row.totalScore==null">
          主观题待批阅
        </div>
        </template>
      </el-table-column>
      <el-table-column align="center"  prop="logicScore" label="逻辑题得分" width="100">
      </el-table-column>
      <el-table-column align="center"  label="主观题得分" width="100">
        <template slot-scope="scope">
          <div v-show="scope.row.totalScore!=null">
            {{scope.row.totalScore-scope.row.logicScore}}
          </div>
          <div v-show="scope.row.totalScore==null">
            待批阅
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center"  prop="errorQuestionIds" label="错题集" width="100">
      </el-table-column>
      <el-table-column align="center"  label="操作" width="180">
        <template slot-scope="scope">
          <div>
            <el-button v-if="scope.row.totalScore==null" disabled type="danger" @click="goToExamRecord(scope.row.id)">
              等待批阅
            </el-button>
            <el-button v-else type="success" @click="goToExamRecord(scope.row.id)">
              查看试卷
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--  ------------------------分页器------------------------  -->
    <div style="text-align: center; margin: 10px auto">
      <el-pagination
          @current-change="changePage"
          layout="total, prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize">
      </el-pagination>
    </div>
    <!--  分页器结束  -->
  </div>
</template>

<script>
let localJwt = localStorage.getItem('localJwt');
export default {
  data(){
    return{
      TableData: [],
      total: 0,
      pageSize: 0,
      currentPage: 1,
      examName:'',
      userId:'',
      localUser:{}
    }
  },
  methods:{
    /*跳转对应成绩界面*/
    goToExamRecord(id){
      //id为试卷id
      console.log("id = " + id);
      let path = '/record-detail?id=' + id;
      //window.open(path);//此方法会打开一个新的窗口
      this.$router.push(path);
    },
    LoadInfo(){
      this.localUser = JSON.parse(localStorage.getItem("localUser"));
      console.log("当前用户id:"+this.localUser.id)
      this.userId = this.localUser.id;
    },
    //分页器相关
    changePage(value){
      this.$router.replace('?page=' + value);
      this.loadList();
    },
    find(){},
    //加载成绩列表
    loadList(){
      let page = this.$router.currentRoute.query.page;
      if (!page){
        page = 1;
      }
      console.log('localJwt =' + localJwt);
      let url = 'http://localhost:9283/examRecord/listForStudent?page=' + page + '&userId='+this.userId;
      console.log('url =' + url);

      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          })
          .get(url).then((response) =>{
        let jsonResult = response.data;
        console.log(jsonResult.state);
        console.log(jsonResult.data);
        /*console.log("list="+jsonResult.data.list);*/
        if (jsonResult.state == 20000){
          this.TableData = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
          console.log(this.TableData)
          if (jsonResult.jwt!=null){
            localStorage.setItem("localJwt",jsonResult.jwt);
          }
        }else if(jsonResult.state==70100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          this.$router.push('/')
        }else {
          this.$alert(jsonResult.message,'错误',{
            confirmButtonText:'确认',
            callback: action => {// eslint-disable-line no-unused-vars
            }
          })
        }
      });
    },
  },
  mounted() {
    this.LoadInfo();
    this.loadList();
  }
}
</script>

<style scoped>
.em-select{
  text-align: left !important;float: left;
}
.find-input{
  display: inline-block;width: 150px;float: left;
}
</style>
